import React from 'react';
import { Text, View, ScrollView, TouchableOpacity, StyleSheet, Pressable } from 'react-native';
import { Table, TableWrapper, Row, Cell } from 'react-native-reanimated-table';


function BasicTable({columns,data,option}){
  // 默认配置
  let defaultOpt = {
    column: ['xuhao'],
  }
  const defaultColumnsOption = ['xuhao'];
  let { frozen=false,sequence=false } = option;

  const columnsdata = columns;
  const dataData = data;
  let indexcol = [];
  let indexdata = [];
  let nColumns = [];
  let nData = [];
  const press = (data) => {
    return (
      <TouchableOpacity onPress={()=> onClick(data)}>
        <View style={{width: 60, height: 30,backgroudColor: 'lightblue'}}>
          <Text>修改{data}</Text>
        </View>
      </TouchableOpacity>
    )
  }

  // 如果存在首列冻结
  if(frozen){
    // 将列的首个剪切
    indexcol = columnsdata.slice(0,1);
    nColumns = columnsdata.slice(1,columnsdata.length);
    nColumns.push('操作');
    // 将数据的首个剪切
    for(let i=0;i<dataData.length;i++){
      indexdata.push(dataData[i].slice(0,1))
      let arr = dataData[i].slice(1,columnsdata.length)
      arr.push(press(i));
      nData.push(arr)
    }
  }

  let frozenRef = React.useRef(null);
  let tbodyRef = React.useRef(null);

  function tbodyscroll(event){
    const { y } = event["nativeEvent"]["contentOffset"];

    frozenRef["current"]["scrollTo"]({y,animated: false});
  }

  function onClick(event){
    // 获取data，携带参数，跳转nav
    const parama = {

    }
    console.log('点击事件', event);
  }

  return (
    <View style={styles.container}>
      {/* 此为条件渲染，若有冻结首行，此table应该为，column根据配置是否冻结，将column和data做处理，将首个数据放入此table，其余放在后方表格
                  若无冻结项，不对数据做处理，直接放入后方表格，此表格不渲染。 */}
        {
          frozen? (
            <Table style={{width: 60,position: 'fixed'}} borderStyle={{borderColor: 'transparent'}}>
              <Row  data={indexcol} style={styles.tablehead} textStyle={styles.text} />
              <ScrollView ref={frozenRef} scrollEnabled={false} showsVerticalScrollIndicator={false}>
                  {
                    indexdata.map((rowdata,rowindex) =>{
                      return (
                        <TableWrapper key={rowindex} style={styles.rowstyle}>
                            {
                              rowdata.map((cellindex) => {
                                return <Cell key={cellindex} data={rowdata} textStyle={styles.text} />
                              })
                            }
                        </TableWrapper>
                      )
                    })
                  }
              </ScrollView>
            </Table>
          ) : (<></>)
        }
      {/* <ScrollView style={{display: 'flex', flexDirection: 'row'}} horizontal={true}> */}
        {/* 表格主体（带表头） */}
        <Table style={styles.table} borderStyle={{borderColor: 'transparent'}}>
            <Row data={nColumns} style={styles.tablehead} textStyle={styles.text} />
            <ScrollView ref={tbodyRef} onScroll={tbodyscroll}> 
              {
                nData.map((rowdata,rowindex)=> {
                  return (
                    <TableWrapper key={rowindex} style={styles.rowstyle}>
                      {
                        rowdata.map((celldata,cellindex) => {
                          return  <Cell key={cellindex} data={celldata} textStyle={styles.text} />
                        })
                      }
                    </TableWrapper>
                  )
                })
              }
            </ScrollView>
        </Table>
      {/* </ScrollView> */}
    </View>
  )
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    margin:6,
    padding:10,
    flexDirection: 'row',
  },
  table: {
    width: 600,
  },
  tablehead:{
    height: 40,
    backgroundColor: '#c6cbd0',
    fontSize: 40,
    fontWeight: 12,
  },
  rowstyle:{
    flexDirection: 'row',
    height:20,
    marginTop: 6,
    marginBottom: 6,
  },
  text:{
    textAlign: 'center',
  }
})

export default BasicTable;